<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>PDM Viewer</title>
    <link rel="icon" href="">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
  </head>
  <body>
  	<form class="form-inline">
  		<div class="form-group">
		    <label>文件</label>
        <div class="input-group file-input" data-accept=".pdm">
          <input id="fileSelectInput" type="text" class="form-control" /><label class="input-group-addon btn btn-primary">浏览...</label>
        </div>
		</div>
  	</form>

  	<div class="panel panel-default">
  	  <div class="panel-heading">
  	    <h3 class="panel-title">输出</h3>
  	  </div>
  	  <div class="panel-body" style="padding: 0;">
  	  	<pre id="output" style="min-height: 10em;border: none;margin: 0;overflow: auto;"></pre>
  	  </div>
  	</div>

  	<script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/template-web.js"></script>
    <script type="text/javascript" src="../../js/fileinput.js"></script>
    <script type="text/javascript">
    	$("#fileSelectInput").change(function(){
    		var file=$(this).val();
    		if(file!=''){
    			var cmd=`java -jar /home/self/apps/pdm-reader/pdm-reader.jar "${file}"`;
    			window.top.app.run(cmd,{
            onOut:function(data){
              out+=data.toString('UTF-8');
              $("#output").text(out);
            },
            onErr:function(data){
              out+=data.toString('UTF-8');
              $("#output").text(out);
            }
          });
    		}
    	});
    </script>
  </body>
</html>